// import React from 'react'  // 组件中如果没有使用到React, 可以选择不引入
import {useState} from 'react'
import HookTest from './components/HookTest'
import HookTest2 from './components/HookTest2'


function App () {
  console.log('App')
  // const [count, setCount] = useState(0) // 返回一个数组 [内部存储数据, 更新数据的函数]
  // 使用useState定义状态数据count
  /* 
  定义state (包含state数据和更新数据的函数)
  第一次调用: 内部保存一个状态数据, 值为指定初始的值, 同时定义一个更新数据的函数
              返回[状态数据, 更新数据的函数]
  后面再调用: 直接返回[状态数据, 更新数据的函数]
  */
  const [count, setCount] = useState(1)
  // this.state.count
  // this.setState({count: this.state.count + 1})
  return (
    <div>
      <h2>App组件: count: {count}</h2>
      <button onClick={() => setCount(count + 1)}>更新count 加1</button>

      {count<5 && <HookTest count={count} setCount={setCount}/>}

      <hr />
      <HookTest2></HookTest2>
    </div>
  )
}
export default App